<template>
  <div class="back"></div>
  <div>
    <div class="query" ref="remove">
      <div class="border"></div>
      <div class="choose">
        <div class="count">
          <div class="hot" @click="addhot">生成事件热力图</div>
          <div class="statistics" @click="addchart">生成事件统计图</div>
        </div>
        <div class="right">
          <div @click="clear" class="hiden">^</div>
          <div class="del" @click="del">X</div>
        </div>
      </div>

      <div class="lists" style="overflow:scroll;overflow-x:hidden" ref="table">
        <table>
          <tr class="top">
            <td>事件编号</td>
            <td>事件类型</td>
            <td>事件等级</td>
            <td>发生时间</td>
            <td>发生地点</td>
            <td>车牌号</td>
            <td>驾驶员</td>
            <td>处理状态</td>
          </tr>
          <tr v-for="item of queryData" :key="item.index" class="msglist">
            <td>{{ item.values_.values_.事件编号 }}</td>
            <td>{{ item.values_.values_.事件类型 }}</td>
            <td>{{ item.values_.values_.事件等级 }}</td>
            <td>{{ item.values_.values_.发生时间 }}</td>
            <td>{{ item.values_.values_.发生地点 }}</td>
            <td>{{ item.values_.values_.车牌号 }}</td>
            <td>{{ item.values_.values_.驾驶员 }}</td>
            <!-- <td>{{ item.values_.values_.处理状态 }}</td> -->
            <td v-if="item.values_.values_.处理状态 == 0">待处理</td>
            <td v-if="item.values_.values_.处理状态 == 1">处理中</td>
            <td v-if="item.values_.values_.处理状态 == 2">已归档</td>
            <td v-if="item.values_.values_.处理状态 == 6">待处理</td>
            <td v-if="item.values_.values_.处理状态 == 4">处理中</td>
            <td v-if="item.values_.values_.处理状态 == 90">已归档</td>
          </tr>
        </table>
      </div>

    </div>
  </div>
  <PiCharts :piedata="piedata" v-if="i % 1 == 0"></PiCharts>
</template>

<script setup>
import PiCharts from "./PiCharts.vue"
import { inject, onMounted, ref } from "vue";
import { createDraw } from "./hooks/createDraw";
import { quertcircle } from "./hooks/queryCircle"
import { useMenuStore } from "../../store";
import { queryall } from "./hooks/queryall"

let i = ref(1)
let table = ref()
let alldata = ref([])
let positionall = ref([])
let position = ref([])
// 获取所有事件
queryall({
  callback: res => {
    alldata.value = res
    positionall.value = alldata.value.map(item => item.geometryChangeKey_.target.flatCoordinates)
    position.value = positionall.value.map(item => [item[0], item[1]])
  }
})

let $store = useMenuStore()
let queryData = ref();
let draw
let remove = ref()
let piedata = ref([])
let potion = ref()//框选的点的位置
let positionArry = ref()//转化二维数组

let $map;
// 创建画笔画布
let source = new ol.source.Vector({});
let layer = new ol.layer.Vector({
  source,
});

watch(() => $store.activeIndex, val => {
  if (val == "2-2") {
    $map.addInteraction(draw);
  } else {
    $map.removeInteraction(draw);
    remove.value.style.display = "none";
    source.clear()
    $map.removeLayer(Hotlayer)
    $map.removeLayer(heatMap)
  }
})

onMounted(() => {
  $map = inject("$map");
  // 添加
  $map.addLayer(layer);
  draw = createDraw({
    source,
    type: "Circle",
  });
  draw.on("drawend", handleDraw)

});
function handleDraw(evt) {
  /* geomtry */
  let position = evt
  source.clear()
  quertcircle({
    position,

    callback: res => {
      queryData.value = res
      piedata = res.map(item => item.values_.values_)
      // 显隐
      remove.value.style.display = "flex";

      potion.value = queryData.value.map(item => item.geometryChangeKey_.target.flatCoordinates)
      // 转化二维数组
      positionArry.value = potion.value.map(item => [item[0], item[1]])

      let source = new ol.source.Vector({
      })
      source.addFeatures(alldata.value)
    }
  })
}
// 点击生成热力图
let heatMap
let Hotlayer
let check = 1
const addhot = () => {
  check++
  if (check % 2 == 0) {
    let data = alldata.value
    let source = new ol.source.Vector({
    })
    source.addFeatures(alldata.value)
    Hotlayer = new ol.layer.Vector({
      source
    })
    $map.addLayer(Hotlayer)

    heatMap = new ol.layer.Heatmap({
      source,
      radius: 20,
      blue: 23,
    })
    $map.addLayer(heatMap)
  } else {
    $map.removeLayer(Hotlayer)
    $map.removeLayer(heatMap)
  }
}
// 关闭弹窗和热力图
const del = () => {
  remove.value.style.display = "none";
  $map.removeLayer(Hotlayer)
  $map.removeLayer(heatMap)
  source.clear()
}
const addchart = () => {
  $store.addchart = 2
}
// 弹窗收起
let clera = 1
const clear = () => {
  clera++
  if (clera % 2 == 0) {
    table.value.style.display = "none"
    remove.value.style.height = 50 + "px";
    remove.value.style.top = "93%"
  } else {
    table.value.style.display = "flex"
    remove.value.style.height = 300 + "px";
    remove.value.style.top = "30%"
  }
}
</script>

<style scoped>
.query {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: 300px;
  position: fixed;
  z-index: 1000;
  top: 30%;
  left: 26%;
  background-color: #fff;
  border-radius: 5px;
  gap: 3px;
}

.border {
  width: 100%;
  height: 5px;
  border: none;
  background-color: rgb(63, 63, 242);
  border-radius: 5px 5px 0px 0px;
}

.choose {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.count {
  display: flex;
  gap: 10px;
}

.count div {
  font-size: 14px;
  width: 120px;
  height: 30px;
  border-radius: 5px;
}

table {
  width: 100%;

}

td {
  border: 1px solid rgb(194, 190, 190);
}

.top {
  font-size: 14px;
  font-weight: 700;
}

.msglist {
  font-size: 12px;
}

.count div {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

}

.lists {
  width: 100%;
  height: 220px;
}

.hot {
  background-color: rgb(138, 219, 57);
}

.statistics {
  background-color: rgb(41, 91, 183);
}

.del {
  height: 30px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(44, 171, 171);
  border-radius: 5px;
  color: #fff;
  font-weight: 800;
}

.right {
  display: flex;
}

.hot:hover {
  cursor: pointer;
}

.statistics {
  cursor: pointer;
}

.del:hover {
  cursor: pointer;
}

.hiden {
  cursor: pointer;
  height: 30px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(44, 171, 171);
  border-radius: 5px;
  color: #fff;
  font-weight: 800;
  margin-right: 10px;
}
</style>